<template>
	<view class="content">
		<view class="list">
			<view class="list-item" v-for="v in list" @click="showQrcode(v)">
				<view class="user">
					<image :src="v.goup_image" />
					{{v.group_name}}
				</view>
				<view class="btn">+加入群聊</view>
			</view>
			<uEmpty v-if="!list.length"></uEmpty>
		</view>
		<view class="mask" v-if="maskShow" @click="maskShow = false">
			<view class="window-box">
				<view class="mask-title">提示</view>
				<view class="qrcode">
					<image :src="$getImageURL(clickItem.group_code)"></image>
				</view>
				<view class="mask-desc">
					<view>请添加管理员微信号<text @click.stop="func.copy(clickItem.group_manager)">（点击复制）</text></view>
					<view>或保存二维码后微信扫描添加</view>
				</view>
				<view class="mask-btn" @click.stop="saveQrcode">保存二维码</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getGroupList
	} from '@/API/business.js'
	import func from '@/utils/func.js'
	export default {
		data() {
			return {
				func,

				list: [],
				page: 1,
				totalPage: 1,

				clickItem: {},
				maskShow: false
			}
		},
		onLoad() {
			this.init()
		},
		onPullDownRefresh() {
			this.init()
		},
		onReachBottom() {
			this.getList()
		},
		methods: {
			init() {
				this.page = 1
				this.getList()
			},
			getList() {
				getGroupList().then(res => {
					let list = res.data.data
					if (this.page > 1) {
						list = this.list.concat(list)
					}
					this.list = list
					this.page++
					this.totalPage = res.data.last_page
				})
			},
			showQrcode(item) {
				this.clickItem = item
				this.maskShow = true
			},
			saveQrcode() {
				uni.downloadFile({
					url: this.$getImageURL(this.clickItem.group_code), //仅为示例，并非真实的资源
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function(res) {
								// var savedFilePath = res.savedFilePath;
							}
						})
					},
					fail: err => {
						console.log('-=-=-e=rr', err)
					}
				});

			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		padding: 20rpx;

		.list {
			display: flex;
			flex-direction: column;
			gap: 20rpx;

			&-item {
				height: 180rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 0 35rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.user {
					display: flex;
					align-items: center;
					gap: 28rpx;
					font-weight: bold;
					font-size: 32rpx;
					color: #252525;

					image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 100%;
					}
				}

				.btn {
					width: 180rpx;
					height: 68rpx;
					line-height: 68rpx;
					text-align: center;
					background: linear-gradient(90deg, #DD551B, #F49355);
					border-radius: 34rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #FFFFFF;
				}
			}
		}

		.mask {
			position: fixed;
			left: 0;
			top: 0;
			width: 100vw;
			height: 100vh;
			background-color: rgba(0, 0, 0, .5);
			display: flex;
			justify-content: center;
			align-items: center;

			.window-box {
				width: 500rpx;
				height: 650rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-weight: 400;
				font-size: 28rpx;
				color: #888888;
				line-height: 48rpx;
				gap: 17rpx;

				.mask-title {
					font-weight: bold;
					font-size: 28rpx;
					color: #121212;
					line-height: 36rpx;
				}

				.qrcode {
					width: 300rpx;
					height: 300rpx;
					border: 1px dashed #aaa;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.mask-desc {
					font-weight: 400;
					font-size: 28rpx;
					color: #888888;
					line-height: 48rpx;
					display: flex;
					flex-direction: column;
					gap: 10rpx;

					text {
						color: #EB5C20 !important;
					}
				}

				.mask-btn {
					width: 325rpx;
					height: 86rpx;
					line-height: 86rpx;
					text-align: center;
					background: linear-gradient(90deg, #DD551B, #F49355);
					border-radius: 43rpx;
					font-weight: 400;
					font-size: 30rpx;
					color: #FFFFFF;
					margin-top: 10rpx;
				}
			}
		}
	}
</style>